<template>
  <div class="permissManaMain">
    <el-select
        class="addPosInput"
        size="small"
        v-model="formInline.region" placeholder="角色类型" style="margin-right: 8px;">
      <el-option label="管理员" value="管理员"></el-option>
      <el-option label="教师" value="教师"></el-option>
      <el-option label="学生" value="学生"></el-option>
    </el-select>

    <el-button size="small"  type="primary" class="selectButton" @click="TermSelRole">查询角色</el-button>
    <div class="permissManaMain">
      <el-collapse  accordion @change="change">
        <el-collapse-item :title="r.roleName" :name="r.roleId" v-for="(r,index) in tableData" :key="index">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>可访问权限</span>
              <el-button style="float: right; padding: 3px 0" type="text"></el-button>
            </div>
            <div>
              <el-tree show-checkbox
                       :data="allMenus"
                       :props="defaultProps">
              </el-tree>
            </div>
          </el-card>
        </el-collapse-item>
      </el-collapse>
    </div>

  </div>

</template>

<script>
import {getRequest, postRequest} from "../../utils/api";

export default {
  name: "Test2",
  data() {
    return {
      pos:{
        name:''
      },
      tableData:[],
      activeName:'1',
      allMenus:[],
      defaultProps: {
        children: 'children',
        label: 'menuName'
      },
      formInline: {
        user: '',
        region: ''
      }
    }
  },
  mounted() {
    this.initPositions();
  },
  methods:{

    initPositions() {
      getRequest('/selAllRole').then(resp=>{
        if (resp){
          this.tableData=resp['obj'];
        }
      })
    },
    TermSelRole(){
      postRequest('/TermSelRole?roleName='+this.formInline['region']).then(resp=>{
        if (resp){
          this.tableData=resp['obj'];
        }
      })
    },
    change(rid){
      if (rid){
        this.initAllMenus(rid);
      }
    },
    initAllMenus(rid){
      postRequest('/SelMenuById?id='+rid).then(resp=>{
        if (resp){
          this.allMenus=resp['obj'];
        }
      })
    }
  }
}
</script>

<style scoped>

.permissManaMain{
  margin-top: 20px;
  width: 700px;
}
</style>